/**
 * [input值改变 仓库就改变版本]
 */

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {setSex,setIdentity,setName,setCard,setBirthday} from '../../../store/actions/myAction'
import Han from '../../../components'
import '../../../static/css/han.form.css'

const {Icon,Input,Layer,Text,ListJump} = Han

export default connect(
    store=>{
        const {cardType,sex,name,card,birthDay}  = store.my
        console.log(store.my)
        return  {
            cardType,
            sex,
            name,
            card,
            birthDay
        }
    },
    dispatch=>{
        return {
            changeName(value){
                dispatch(setName(value))
            },
            changeSex(value){
                dispatch(setSex(value))
            },
            changeBirthday(value){
                dispatch(setBirthday(value))
            },
            changeCard(value){
                dispatch(setCard(value))
            },
            changeCardTYpe(value){
                dispatch(setIdentity(value))
            }
        }
    }
)(class My extends Component {

    state={
        img:'',
        // 控制是否可以编辑
        noEdit:true,

        // 控制证件类型弹层显示隐藏
        layerShow:false,
        cardOptions:{IDcard:'身份证',passport:'护照'},

        // 控制性别弹层显示隐藏
        sexShow:false,
        sexOptions:{women:'女',man:'男'}
    }
    // 点击退出
    loginOut=()=>{
        const { $httpReq,$api,props } = this;
        $httpReq($api.LOGIN_OUT(),res=>{
            localStorage.clear()
            props.history.push('/login')
        })
    }

    // 点击编辑&&保存
    setMessage = ()=>{
        const {cardType,sex,name,card,birthDay} = this.props
        const {noEdit,img} = this.state;
        const {$httpReq,$api} =  this;

        if(!noEdit){

            // 数据收集 && 提交
            let submitData = {
                user:localStorage.user,
                sex,
                name,
                cardType,
                card,
                birthDay,
                img
            }

            // 非空校验
           
            // 数据请求
            $httpReq($api.USER_EDIT({submitData}))

        }
        this.setState({noEdit:!noEdit})
    }

    render() {
        const {sex,name,card,birthDay,cardType,changeName,changeSex,changeBirthday,changeCard,changeCardTYpe} = this.props
        const {img,noEdit,layerShow,cardOptions,sexShow,sexOptions} = this.state
        return (
            <div className="my">

                {/* 头部 */}
                <div className="title">个人中心<span onClick={this.loginOut}>退出</span></div> 

                {/* 账号资料 */}
                <div className="account">
                   <div className="pic"><img src={img}/></div>
                    <p>{localStorage.user}</p>
                </div>

                {/* 实名认证 */}
                <div className="han_type">
                    实名认证
                    <span className="edit" onClick={this.setMessage}>
                        <Icon iconName={noEdit?"editor":"save"}/>
                        {noEdit?'编辑':'保存'}
                    </span>
                </div>

                <div className="message">

                    <Input disabled={noEdit} label="真实姓名" value={name} change={name=>changeName({name})}/>
                
                    <Text label="证件类型" value={cardOptions[cardType]} btnShow={!noEdit} click={()=>this.setState({layerShow:!layerShow})} />

                    <Layer 
                        layerShow={layerShow}
                        onCancel={()=>this.setState({layerShow:!layerShow})}  
                        onOk={ value =>{
                            changeCardTYpe(value)
                            this.setState({layerShow:!layerShow})
                        }}
                        options={cardOptions}
                        defaultValue={cardType||'IDcard'}
                    />

                    <Input disabled={noEdit} label="证件号码" value={card} change={card=>{
                            changeCard(card)
                            changeBirthday(card.substring(6,10)+'-'+card.substring(10,12)+'-'+card.substring(12,14))
                    }}/>

                    
                    <Text label="出生日期" value={birthDay} btnShow={false} />
                   

                    <Text label="性别" value={sexOptions[sex]} btnShow={!noEdit} click={()=>this.setState({sexShow:!sexShow})} />
                   
                    <Layer 
                        layerShow={sexShow}
                        onCancel={()=>this.setState({sexShow:!sexShow})}  
                        onOk={ value =>{
                            this.setState({sexShow:!sexShow})
                            changeSex(value)
                        }}
                        options={sexOptions}
                        defaultValue={sex||'women'}
                    />

                </div>

                {/* 我的记录 */}
                <div className="record">
                    <ListJump title="健康信息上报记录" path={{pathname:"/record",state:0}}/>
                    <ListJump title="口罩预约购买记录" path={{pathname:"/record",state:1}}/>
                </div>
            </div>
        )
    }

    componentDidMount(){
        const {$httpReq,$api} = this
        $httpReq($api.USER_SEARCH({user:localStorage.user}),res=>{

            const {img,sex,name,cardType,card,birthDay} = res.data;
            
            const {changeName,changeSex,changeBirthday,changeCard,changeCardTYpe} = this.props

            changeName(name)
            changeSex(sex)
            changeBirthday(birthDay)
            changeCard(card)
            changeCardTYpe(cardType)
          
            this.setState({img});
        })
    }
})
